<template>
  <div>
    <el-form inline :model="eventQuery" ref="eventQueryFormRef">
      <el-form-item>
        <el-input placeholder="关键字" v-model="eventQuery.keywords"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="eventQuery.status" placeholder="状态" style="width: 240px">
          <el-option label="全部" :value="-1"/>
          <el-option label="正常" :value="0"/>
          <el-option label="禁用" :value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" @click="getSocEventList">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button :icon="Refresh" @click="eventQueryFormRef?.resetFields()"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>
    <el-button :icon="Plus" @click="goCreate" size="small" type="primary">新增</el-button>
    <el-button :icon="Download" size="small">导入</el-button>
    <el-button :icon="Upload" size="small">导出</el-button>
    <div>
      <el-table :data="socEventPage.list" v-loading="loading">
        <el-table-column type="expand">
          <template #default="scope">
            <div m="4">
              <p m="t-0 b-2">创建时间: {{
                  scope.row.createTime ? new Date(scope.row.createTime).toLocaleString() : ''
                }}</p>
              <p m="t-0 b-2">更新时间: {{
                  scope.row.updateTime ? new Date(scope.row.updateTime).toLocaleString() : ''
                }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="封面">
          <template #default="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="eventId" label="活动ID"></el-table-column>
        <el-table-column prop="organizerId" label="组织者ID"></el-table-column>
        <el-table-column prop="organizer" label="组织者"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="requiresApproval" label="是否需要审核">
          <template #default="scope">
            {{ scope.row.requiresApproval === 0 ? '不需要' : '需要' }}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="location" label="活动地点"></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            {{ scope.row.status === 0 ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间">
          <template #default="scope">
            {{ scope.row.startTime ? new Date(scope.row.startTime).toLocaleString() : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
          <template #default="scope">
            {{ scope.row.endTime ? new Date(scope.row.endTime).toLocaleString() : '' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button size="small" @click="goUpdate(scope.row.eventId)" :icon="EditPen">编辑</el-button>
            <el-button size="small" type="danger" @click="openDel( scope.row.eventId)" :icon="Delete">删除</el-button>
            <el-divider direction="vertical"/>
            <el-dropdown>
              <el-button size="small">
                更多
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="openPreview(scope.row.eventId)">
                    <el-icon>
                      <View></View>
                    </el-icon>
                    预览
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
          v-model:current-page="eventQuery.pageNum"
          :page-sizes="[8, 16, 32, 64]"
          v-model:page-size="eventQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="socEventPage.total"
      />
    </div>
    <el-dialog v-model="dialogVisible" title="提示">
      <div>

      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, onMounted, watch} from "vue";
import {useRouter} from "vue-router";
import {Download, Refresh, Delete, EditPen, Plus, Upload, View, Search, ArrowDown} from "@element-plus/icons-vue";
import type {FormInstance, FormRules} from "element-plus";
import {ElMessage, ElMessageBox} from "element-plus";
import type {SocEvents} from "@/api/social/event/type";
import {
  reqGetEventPage, reqDeleteEvent
} from "@/api/social/event";

let eventQuery = reactive({
  pageNum: 1,
  pageSize: 8,
  keywords: "",
  status: -1,
});
let loading = ref<boolean>(true);
let socEventPage = reactive({
  pageNum: 1,
  total: 0,
  list: []
})
const router = useRouter();
let dialogVisible = ref<boolean>(false)
let eventQueryFormRef = ref<FormInstance>();

let getSocEventList = () => {
  reqGetEventPage(eventQuery).then((res) => {
    Object.assign(socEventPage, res.data)
    loading.value = false;
  });
};

let goUpdate = (eventId: string) => {
  router.push({
    path: '/layout/social/event/create',
    query: {
      eventId
    }
  })
};
let openPreview = (eventId: string) => {
  //发送请求
  dialogVisible.value = true
}
let openDel = (bardId: string) => {
  ElMessageBox.confirm("删除之后不能恢复，确认删除吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        reqDeleteEvent(bardId).then(() => {
          getSocEventList();
          ElMessage({
            message: "删除成功！",
            type: "success",
          });
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消删除！",
        });
      });
};
let goCreate = () => {
  router.push({
    path: '/layout/social/event/create'
  })
}
onMounted(() => {
  getSocEventList();
});

watch([() => eventQuery.pageNum, () => eventQuery.pageSize], () => {
  getSocEventList();
});
</script>
